<template>
  <!-- category（分类）信息管理页 -->
  <div class="main">
    <div class="searchOrderDiv">
      <el-button id="search_button" plain size="mini" @click="searchId()">搜索</el-button>
      <el-input id="search_input" size="mini" v-model="searchOrder" placeholder="输入订单ID"></el-input>
    </div>
    <!-- 列表渲染 -->
    <el-table
      :data="orders"
      style="width: 1002px; margin: 0 auto"
      max-height="352"
      stripe
      border
      :header-cell-style="headerStyle"
    >
      <!-- ID项 -->
      <el-table-column label="ID" width="250">
        <template slot-scope="scope">
          <a class="orderDetail" @click="detail(scope.row)">{{
            scope.row.orderId
          }}</a>
          <el-dialog title="订单详情" :visible.sync="dialogVisible" width="40%">
            <div class="dialogItem">
              <span class="dialogKey">订单ID:</span>
              <span class="dialogValue">{{ scope.row.orderId }}</span>
            </div>
            <div class="dialogItem">
              <span class="dialogKey">商品名称:</span>
              <span class="dialogValue">{{ scope.row.spu.spuTitle }}</span>
            </div>
            <div class="dialogItem">
              <span class="dialogKey">商品规格:</span>
              <span
                class="dialogValue"
                v-html="filterSkuOwnSpec(scope.row.sku.skuOwnSpec)"
              ></span>
            </div>
            <div class="dialogItem">
              <span class="dialogKey">商品单价:</span>
              <span class="dialogValue"
                >{{ scope.row.sku.skuPrice | skuPriceFilter }}元</span
              >
            </div>
            <div class="dialogItem">
              <span class="dialogKey">购买数量:</span>
              <span class="dialogValue">{{ scope.row.buyNum }}</span>
            </div>
            <div class="dialogItem">
              <span class="dialogKey">实付金额:</span>
              <span class="dialogValue"
                >{{ scope.row.actualPay | skuPriceFilter }}元</span
              >
            </div>
            <div class="dialogItem">
              <span class="dialogKey">购买用户ID:</span>
              <span class="dialogValue">{{ scope.row.userId }}</span>
            </div>
            <div class="dialogItem">
              <span class="dialogKey">收货人姓名:</span>
              <span class="dialogValue">{{
                scope.row.address.consigneeName
              }}</span>
            </div>
            <div class="dialogItem">
              <span class="dialogKey">收货人地址:</span>
              <span class="dialogValue">{{
                scope.row.address.consigneeAddress
              }}</span>
            </div>
            <div class="dialogItem">
              <span class="dialogKey">收货人电话:</span>
              <span class="dialogValue">{{
                scope.row.address.consigneePhone
              }}</span>
            </div>
          </el-dialog>
        </template>
      </el-table-column>
      <!-- 名称项 -->
      <el-table-column label="名称" width="250">
        <template slot-scope="scope">
          <!-- 名称展示文本框 -->
          <div>
            {{ scope.row.spu.spuTitle }}
          </div>
        </template>
      </el-table-column>
      <!-- 操作栏 -->
      <el-table-column label="实付金额" width="250">
        <template slot-scope="scope">
          <span>{{ scope.row.actualPay | skuPriceFilter }}元</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="250">
        <template slot-scope="scope">
          <span>{{ scope.row.status | statusFilter }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orders: [],
      dialogVisible: false,
      searchOrder: ""
    };
  },
  mounted() {
    this.getOrders();
  },
  methods: {
    headerStyle() {
      return "color: #000;background-color: #c5464a;height:60px;";
    },
    getOrders() {
      this.$http.post("jw-order/list", {}).then((response) => {
        this.orders = response.data.result;
      });
    },
    detail(order) {
      this.dialogVisible = true;
    },
    filterSkuOwnSpec(val) {
      var spec = JSON.parse(val);
      return (
        "口味：" +
        spec.n10 +
        "，净含量：" +
        spec.n11 +
        "克，品质等级：" +
        spec.n12
      );
    },
    searchId(){
      let data = [];
      this.orders.forEach(order => {
        if (order.orderId.toString() == this.searchOrder) {
          data.push(order);
          this.orders = data;
          return;
        }
        if (this.searchOrder == "") {
          this.getOrders();
        }
      });
    }
  },
  filters: {
    skuPriceFilter(val) {
      let priceStr = val.toString();
      return (
        priceStr.slice(0, priceStr.length - 2) +
        "." +
        priceStr.slice(priceStr.length - 2)
      );
    },
    statusFilter(val) {
      if (0 == val) {
        return "未支付";
      }
      if (1 == val) {
        return "已支付，待发货";
      }
      if (2 == val) {
        return "已发货";
      }
      if (3 == val) {
        return "已收货";
      }
      if (4 == val) {
        return "退货待处理";
      }
      if (5 == val) {
        return "已退货";
      }
    },
  },
};
</script>

<style scope>
.main {
  overflow: hidden;
}
.el-input__inner {
  padding: 0 !important;
}
.addButton {
  margin-top: 12px !important;
  float: right;
  right: 30px;
}
.orderDetail {
  color: rgb(60, 60, 196);
}
.orderDetail:hover {
  color: red;
}
.dialogItem {
  box-shadow: rgba(122, 122, 122, 0.1) 0 1px;
}
.dialogKey {
  width: 100px;
  display: inline-block;
  font-weight: 600;
}
.dialogValue {
  width: 300px;
  display: inline-block;
}
.searchOrderDiv{
  margin: 10px 0px;
  height: 50px;
}
.searchOrderDiv .el-input{
  width: 400px;
  float: right;
}
.searchOrderDiv .el-button{
  float: right;
  width: 60px;
  margin-left: 5px;
  margin-right: 20px;
}
</style>
